<template>
    <div>
        <div v-for="item in tempList" style="display: flex">
            <div style="border-right: 1px solid blue">
                <div>
                    {{ item.productName }}
                </div>
                <div>项目开始时间：{{ item.productBeginDate }}</div>
            </div>
            <div>
                <div
                    v-for="val in item.children"
                    style="border: 1px solid grey"
                    :style="{
                        width: computeLength(val.beginDate, val.endDate, val.changeDate) + 'px',
                        marginLeft: offsetLeft(val.beginDate) + 'px'
                    }"
                >
                    <div>{{ val.type }}</div>
                    <div
                        style="background: blue; height: 10px"
                        :style="{
                            width:
                                val.completeProgress * computeLength(val.beginDate, val.endDate, val.changeDate) + 'px'
                        }"
                    ></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Markup',
        data() {
            return {
                tempList: [
                    {
                        id: 1,
                        productName: '项目名称1',
                        productBeginDate: '2024-03-13',
                        children: [
                            {
                                type: '1',
                                beginDate: '2024-05-01',
                                endDate: '2024-06-02',
                                completeProgress: '0.5',
                                costProgress: 120,
                                changeDate: '2024-06-08'
                            },
                            {
                                type: '2',
                                beginDate: '2024-05-08',
                                endDate: '2024-06-10',
                                completeProgress: '0.1',
                                costProgress: 70,
                                changeDate: ''
                            },
                            {
                                type: '3',
                                beginDate: '2024-05-26',
                                endDate: '2024-06-20',
                                completeProgress: '0.2',
                                costProgress: 120,
                                changeDate: ''
                            }
                        ]
                    }
                ]
            }
        },
        methods: {
            // 计算长度
            computeLength(beginDate, endDate, changeDate) {
                var tempBeginDate = new Date(beginDate)
                var tempEndDate = new Date(endDate)
                if (changeDate) {
                    var tempChangeDate = new Date(changeDate)
                    var daysDifference = Math.floor((tempChangeDate - tempBeginDate) / (1000 * 60 * 60 * 24))
                } else {
                    var daysDifference = Math.floor((tempEndDate - tempBeginDate) / (1000 * 60 * 60 * 24))
                }
                return daysDifference
            },
            // 计算左侧偏移   假设时间轴第一天是2024-05-01
            offsetLeft(beginDate) {
                var tempDate = new Date('2024-05-01')
                var tempBeginDate = new Date(beginDate)
                var tempLeft = Math.floor((tempBeginDate - tempDate) / (1000 * 60 * 60 * 24))
                return tempLeft
            }
        }
    }
</script>
